<template>
  <div class="msg">
    <div v-if="msg.receiver.toString() === myId" class="hisMsg">
      <!--头像-->
      <el-avatar v-if="avatar" :src="avatarUrl"></el-avatar>
      <!--内容-->
      <el-image
        v-if="msg.image"
        :preview-src-list="[imageUrl]"
        :src="imageUrl"
        style="width: 100px;"
      />
      <div class="msg-main" v-else v-html="msg.content"></div>
    </div>
    <div v-else class="myMsg">
      <!--内容-->
      <el-image
        v-if="msg.image"
        :src="imageUrl"
        :preview-src-list="[imageUrl]"
        style="width: 100px;"
      />
      <div class="msg-main" v-else v-html="msg.content"></div>
      <!--头像-->
      <el-avatar v-if="avatar" :src="avatarUrl"></el-avatar>
    </div>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/const'
import { getId } from '@/utils/auth'

export default {
  name: 'Msg',
  props: {
    msg: {
      required: true
    },
    avatar: {
      required: true
    }
  },
  computed: {
    avatarUrl () {
      return baseUrl + this.avatar
    },
    myId () {
      return getId()
    },
    imageUrl () {
      return baseUrl + this.msg.image
    }
  }
}
</script>

<style scoped lang="less">
.hisMsg {
  display: flex;
  padding: 10px;

  .el-avatar {
    margin-right: 10px;
  }

  .msg-main {
    background-color: @white;
    border-radius: 16px;
    line-height: 1.5;
    font-size: 14px;
    padding: 8px 16px;
    max-width: 500px;
  }
}

.myMsg {
  display: flex;
  padding: 10px;
  justify-content: flex-end;

  .el-avatar {
    margin-left: 10px;
  }

  .msg-main {
    background-color: @white;
    border-radius: 16px;
    line-height: 1.5;
    font-size: 14px;
    padding: 8px 16px;
    max-width: 500px;
  }
}

</style>
